I love adding images onto my page. It makes your page load longer, but is much more stimulating to browse. Without graphics your page would be all text, and the visitor would just sit and read. How Boring! Most people like the colorful graphics. This will be a large part of your html tricks lesson. Just take it one step at a time. This is where the fun begins.
To add an image on your page, (for beginners) I'd recommend just finding an image that you like on another web page. (Make sure it doesn't have a copyright notice) Then, if your using Netscape, just click and hold your mouse over your graphic of choice. A pop up menu will appear giving you different choices. Choose the option that says, "Copy image location". This will put the url (location of gif) into your clip board.
Use the line of code below to add the image to your web page.
<img src="paste_url_here">
•You'll need to paste the location of the gif over where is says "paste_url_here". Then it will link the image from that web site to your own.
•This is just for beginners. When you are able to get your own disk space, you'll be able to put the location of the graphics you make, linking up on your server. (I'll show you many great & free web services at the end of this document)
•Below is an example of the html code of my "Extreme Mac Banner".
• You can configure this to be aligned in many different places. You can use your <center> and </center> to of course CENTER you graphic. Or see below for 3 other ways to align you graphic.
•Above you'll notice that is doesn't close off at the .gif"> but continues on saying align="center">. The ">" is moved over and ends later in the command. The results of this are option 1 centers the graphic, option 2 makes the graphic on the far right of the page, and option 3 makes the graphic on the far left of the page.
Linking a Graphic
Linking graphics are easy. You just have to combine them. Look at the example below.
The link goes first, telling whatever is after it will become the part that you click on to go to the link's destination. Notice that there is no text after the link command. Also, notice that the link stopper </a> is after the graphic location. This is because the link command needs to travel through the graphic and end after the graphic. This is what it would look like on you page:
 
•There is one problem. You may not care, or you may want this "problem" in, but to some people, it's not wanted. Do you see the dark blue border around the banner? Well, that isn't part of the banner at all. That is what a linked graphic does to your image. You can change this if you want, so that no border appears. All you have to do is change the code to say this:
